<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-21 13:40:24
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【退菜单】</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .more-bill-card .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000;
      }

      .more-bill-card .description {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000;
        margin: 4px 0;
      }

      .more-bill-card .desc-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000;
        margin-top: 4px;
      }

      .more-bill-card .desc-line {
        width: 100%;
        height: 1px;
        background: #000;
        margin-top: 6px;
        border-top: 1px solid #000;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .more-bill-card .desk-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
        margin-top: 4px;
      }

      .more-bill-card .desk-box .desk-box-left {
        width: 70px;
      }

      .more-bill-card .desk-box .desk-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-width: 300px;
        line-height: 20px;
      }

      .more-bill-card .desc-item .desc-item-right {
        display: flex;
        align-items: center;
      }

      .more-bill-card .desk-box:last-child {
        margin-right: 0;
      }

      .more-bill-card .good-list-box {
        margin-top: 4px;
      }

      .more-bill-card .good-list-box .good-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
      }

      .more-bill-card .good-list-box .good-item .good-right-box {
        display: flex;
        align-items: center;
      }

      .more-bill-card .good-list-box .good-item .good-right-box p {
        margin-left: 20px;
      }
      .more-bill-card .good-list-box .good-sku-item {
        margin-top: 4px;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
        line-height: 18px;
      }
      .good-num {
        /* margin-left: 20px;
         */
        margin: 0px;
        width: 80px;
        text-align: right;
        word-break: keep-all;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card" v-if="postMessageDatas&&postMessageDatas.detail">
        <h1 class="title">{{ postMessageDatas.detail.shopName }}</h1>

        <div class="description">【退菜单】</div>
        <div class="desk-box">
          <div class="desk-box-left">桌台：</div>
          <div v-if="postMessageDatas.detail">{{postMessageDatas.detail.deskName}}</div>
        </div>
        <div class="desc-item">
          <div class="desc-item-left">单号：</div>
          <div>{{ postMessageDatas.ticket_id }}</div>
        </div>
        <div class="desc-item">
          <div>{{ postMessageDatas.detail.clerkName }}</div>
          <span>{{ postMessageDatas.detail.create_time }}</span>
        </div>
        <div class="desc-item">
          <div>菜品</div>
          <div class="desc-item-right">
            <span>退菜数量</span>
            <p class="good-num">剩余数量</p>
          </div>
        </div>
        <div class="desc-line"></div>
        <div
          class="good-list-box"
          v-for="(food,index) in postMessageDatas.detail.foodList"
          :key="index"
        >
          <div class="good-item">
            <div class="good-name">{{ food.name }}</div>
            <div class="good-right-box">
              <span>{{ food.back_num }}{{food.unit}}</span>
              <p class="good-num">{{ food.num }}{{food.unit}}</p>
            </div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
            （{{ dealFoodSkuDescFun(food) }}）
          </div>
        </div>
        <div class="desc-line"></div>
        <div class="desc-item">
          <div>退菜原因：</div>
          <span>{{postMessageDatas.detail.reason}}</span>
        </div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          postMessageDatas: {
            detail: {
              shopName: '测试店铺',
              deskName: 'A1',
              clerkName: '测试员工',
              create_time: '2024-11-07 23:01:51',
              foodList: [
                {
                  name: '测试菜品1',
                  back_num: 2,
                  num: 5,
                  unit: '份',
                  notes: ['少辣', '不要葱']
                },
                {
                  name: '测试菜品2',
                  back_num: 1,
                  num: 3,
                  unit: '份',
                  notes: ['多糖', '加冰']
                }
              ],
              reason: '测试退菜原因'
            },
            ticket_id: '1234567890'
          }
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess, printerPage) => {
            this.postMessageDatas = mess
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        computed: {
          // computedDeskName() {
          //     let deskNameList = []
          //     if (this.postMessageDatas?.detail?.deskList?.length) {
          //         deskNameList = this.postMessageDatas.detail.deskList.map(desk => {
          //             return `${desk.name}(${desk.use_num})`
          //         })
          //         return deskNameList.join('、')
          //     }
          //     return ''
          // },
          // 处理回显菜品的规格信息（做法+口味+部位）
          dealFoodSkuDescFun() {
            return function (item) {
              if (item && item.notes && item.notes.length) {
                return item.notes.join('、')
              } else {
                return false
              }
            }
          }
        }
      })
    </script>
  </body>
</html>
